import { formatCount, convertCurrency } from '@/utils/common.js';

function electricalViews(info) {
  var str = convertCurrency(info.receivableAmount)
  var moneyArray = []
  var index = 0
  var i = str.indexOf('整') != -1 ? 2 : 1
  for (var item of str) {
    moneyArray.push({
      type: 'text',
      text: item,
      css: {
        fontWeight: (index + i >= str.length || index % 2) ? '400' : 'bold',
        paddingLeft: '6rpx'
      }
    })
    index++
  }
  var moneyTitles = []
  var moneyKeys = ['万', '千', '百', '十', '圆', '角', '分']
  for (var item of moneyKeys) {
    var view = item == '分' ? {
      type: 'view',
      css: {
        width: '18rpx',
        height: '26rpx',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        'box-sizing': 'border-box',
      },
      views: [
        {
          type: 'text',
          text: item
        }]

    } : {
      type: 'view',
      css: {
        width: '20rpx',
        height: '26rpx',
        display: 'flex',
        justifyContent: 'center',
        alignItems: 'center',
        border: '0 solid #333333',
        borderRightWidth: '1rpx',
        'box-sizing': 'border-box',
      },
      views: [
        {
          type: 'text',
          text: item
        }]
    }
    moneyTitles.push(view)
  }
  var detailViews = []
  var keys = [{ key: 'name', width: '102rpx' }, { key: 'code', width: '118rpx' }, { key: 'unit', width: '70rpx' }, { key: 'number', width: '50rpx' }, { key: 'unitPrice', width: '70rpx' }, { key: '', width: '140rpx' }]
  for (var item of info.expenseDetails) {
    for (var data of keys) {
      var view = {
        type: 'view',
        css: {
          width: data.width,
          display: 'flex',
          alignItems: 'center',
          justifyContent: !data.key ? 'flex-start' : 'center',
          'box-sizing': 'border-box',
          height: '34rpx',
          border: '0 solid #333333',
          borderBottomWidth: '1rpx',
          borderRightWidth: '1rpx',
          'box-sizing': 'border-box',
        },
        views: data.key ? [
          {
            type: 'text',
            text: item[data.key] || (data.key == 'code' ? '' : '0'),
            css: {
              'word-wrap': 'anywhere',
            }
          }
        ] : []
      }
      detailViews.push(view)
      if (!data.key) {
        var arr = item.total.replace(/\./g, '').split('')
        while (arr.length < 7) {
          arr.unshift('')
        }
        var i = 0
        for (var k of moneyKeys) {
          var v = k == '分' ? {
            type: 'view',
            css: {
              width: '18rpx',
              height: '34rpx',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              'box-sizing': 'border-box',
            },
            views: [
              {
                type: 'text',
                text: arr[i],
                css: {
                  fontWeight: 'bold',
                }
              }]

          } : {
            type: 'view',
            css: {
              width: '20rpx',
              height: '34rpx',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              border: '0 solid #333333',
              borderRightWidth: '1rpx',
              'box-sizing': 'border-box',
            },
            views: [
              {
                type: 'text',
                text: arr[i],
                css: {
                  fontWeight: 'bold',
                }
              }]
          }
          view.views.push(v)
          i++
        }
      }
    }
  }
  if (info.expenseDetails.length < 5) {
    for (var i = 0; i < 5 - info.expenseDetails.length; i++) {
      for (var data of keys) {
        var view = {
          type: 'view',
          css: {
            width: data.width,
            display: 'flex',
            alignItems: 'center',
            justifyContent: !data.key ? 'flex-start' : 'center',
            'box-sizing': 'border-box',
            height: '34rpx',
            border: '0 solid #333333',
            borderBottomWidth: '1rpx',
            borderRightWidth: '1rpx',
            'box-sizing': 'border-box',
          },
          views: []
        }
        detailViews.push(view)
        if (!data.key) {
          for (var k of moneyKeys) {
            var v = k == '分' ? {
              type: 'view',
              css: {
                width: '18rpx',
                height: '34rpx',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                'box-sizing': 'border-box',
              },
            } : {
              type: 'view',
              css: {
                width: '20rpx',
                height: '34rpx',
                display: 'flex',
                justifyContent: 'center',
                alignItems: 'center',
                border: '0 solid #333333',
                borderRightWidth: '1rpx',
                'box-sizing': 'border-box',
              },
            }
            view.views.push(v)
          }
        }
      }
    }
  }

  return {
    css: {
      backgroundColor: '#FFFFFF',
      width: '702rpx',
      padding: '15rpx',
      boxSizing: "border-box",
      fontSize: '14rpx',
      'line-height': '17rpx'
    },
    views: [
    // 标题
    {
        type: 'view',
        css: {
          display: 'flex',
          justifyContent: 'center',
          alignItems: 'center',
          flexDirection: 'column',
          fontWeight: 'bold',
          textAlign: 'center',
          marginBottom: '28rpx',
          position: 'relative',
          width: '654rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              height: '34rpx',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              position: 'relative',
              fontSize: '22rpx',
              marginTop: '10rpx'
            },
            views: [
              {
                type: 'text',
                text: info.repairShopName,
              }]
          },
          {
            type: 'view',
            css: {
              height: '6rpx',
              color: 'transparent',
              border: '0 solid #333333',
              borderBottomWidth: '1rpx',
              borderTopWidth: '1rpx',
              'box-sizing': 'border-box',
              position: 'relative',
              fontSize: '22rpx',
            },
            views: [
              {
                type: 'text',
                text: info.repairShopName,
              }]
          },
          {
            type: 'view',
            css: {
              top: 0,
              left: 0,
              position: 'absolute',
            },
            views: [
              {
                type: 'image',
                src: info.extend.logo  ? (info.extend.logo += '?imageView2/2/h/84') : '',
                css: {
                  'flex-shrink': 0,
                  height: '56rpx',
                  // width: '56rpx',
                  marginLeft: '28rpx'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              display: 'flex',
              alignItems: 'center',
              justifyContent: 'flex-end',
              top: '24rpx',
              right: 0,
              position: 'absolute',
              color: '#875A38'
            },
            views: [
              {
                type: 'text',
                text: info.number,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      // top 行
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          justifyContent: 'space-between',
          height: '34rpx',
          marginBottom: '6rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              width: '248rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '客户：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: info.customer.name,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '电话：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: info.customer.phone,
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              width: '200rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '日期：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: info.repairTime.split(' ')[0],
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      // table
      {
        type: 'view',
        css: {
          border: '2rpx solid #333333',
          display: 'flex',
          alignItems: 'flex-start',
          'flex-wrap': 'wrap',
          justifyContent: 'space-between',
          marign: '4rpx 0 8rpx 0',
          'box-sizing': 'border-box',
        },
        views: [
          // table 左
          {
            type: 'view',
            css: {
              width: '550rpx',
              display: 'flex',
              alignItems: 'center',
              'flex-wrap': 'wrap',
              'flex-shrink': 0,
              justifyContent: 'space-between',
              'box-sizing': 'border-box',
            },
            views: [
              // 第一行
              {
                type: 'view',
                css: {
                  width: '102rpx',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  'box-sizing': 'border-box',
                  height: '52rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: '品名及型号'
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '118rpx',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  'box-sizing': 'border-box',
                  height: '52rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: '机身号码'
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '70rpx',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  'box-sizing': 'border-box',
                  height: '52rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: '单位'
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '50rpx',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  'box-sizing': 'border-box',
                  height: '52rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: '数量'
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '70rpx',
                  display: 'flex',
                  alignItems: 'center',
                  justifyContent: 'center',
                  'box-sizing': 'border-box',
                  height: '52rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: '单价'
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '140rpx',
                  display: 'flex',
                  alignItems: 'center',
                  'flex-wrap': 'wrap',
                  'box-sizing': 'border-box',
                  height: '52rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  borderRightWidth: '1rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'view',
                    css: {
                      width: '140rpx',
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      padding: '0 12rpx 0 12rpx',
                      'box-sizing': 'border-box',
                      height: '26rpx',
                      border: '0 solid #333333',
                      borderBottomWidth: '1rpx',
                      'box-sizing': 'border-box',
                    },
                    views: [
                      {
                        type: 'text',
                        text: '金额'
                      },
                    ]
                  },
                  ...moneyTitles
                ]
              },
              // 数据行
              ...detailViews,
              // 合计行
              {
                type: 'view',
                css: {
                  width: '550rpx',
                  display: 'flex',
                  alignItems: 'center',
                  'box-sizing': 'border-box',
                  height: '34rpx',
                  border: '0 solid #333333',
                  borderRightWidth: '1rpx',
                },
                views: [
                  {
                    type: 'view',
                    css: {
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'flex-end',
                      'min-width': '126rpx',
                      height: '34rpx',
                    },
                    views: [
                      {
                        type: 'text',
                        text: '实收金额（大写）',
                        css: {
                          textAlign: 'center'
                        }
                      }
                    ]
                  },
                  {
                    type: 'view',
                    css: {
                      display: 'flex',
                      alignItems: 'center',
                      width: '300rpx',
                      'box-sizing': 'border-box',
                      height: '34rpx',
                    },
                    views: [
                      ...moneyArray
                    ]
                  },
                  (info.extend.sealType == '1' || info.extend.sealType == '2') && info.extend.sealUrl ?
                    {
                      type: 'view',
                      css: {
                        width: '1rpx',
                        height: '34rpx',
                        display: 'flex',
                        alignItems: 'center',
                      },
                      views: [
                        {
                          type: 'image',
                          src: info.extend.sealUrl,
                          css: {
                            'flex-shrink': 0,
                            height: '96rpx',
                            marginLeft: info.extend.sealType == '2' ? '48rpx' : 0
                          }
                        }
                      ]
                    } : {},
                  {
                    type: 'view',
                    css: {
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'flex-start',
                      width: '80rpx',
                      height: '52rpx',
                    },
                    views: [
                      {
                        type: 'text',
                        text: '￥' + formatCount(info.receivableAmount),
                        css: {
                          'white-space': 'nowrap',
                          fontWeight: 'bold'
                        }
                      }
                    ]
                  }
                ]
              }
            ]
          },
          // table 右
          {
            type: 'view',
            css: {
              width: '118rpx',
              display: 'flex',
              'flex-wrap': 'wrap',
              'flex-shrink': 0,
              flex: 1,
              'box-sizing': 'border-box',
            },
            views: [
              {
                type: 'view',
                css: {
                  width: '118rpx',
                  display: 'flex',
                  justifyContent: 'center',
                  alignItems: 'center',
                  height: '52rpx',
                  border: '0 solid #333333',
                  borderBottomWidth: '1rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: '备注/说明'
                  }
                ]
              },
              {
                type: 'view',
                css: {
                  width: '100%',
                  display: 'flex',
                  justifyContent: 'center',
                  height: '34rpx',
                  padding: '8rpx',
                  'box-sizing': 'border-box',
                },
                views: [
                  {
                    type: 'text',
                    text: info.remark || ' ',
                    css: {
                      'line-height': '18rpx',
                      fontWeight: 'bold'
                    }
                  }
                ]
              }
            ]
          },
          // table 下
          {
            type: 'view',
            css: {
              width: '672rpx',
              display: 'flex',
              alignItems: 'flex-start',
              'flex-shrink': 0,
              justifyContent: 'space-between',
              'box-sizing': 'border-box',
              border: '0 solid #333333',
              borderTopWidth: '1rpx',
            },
            views: [
              {
                type: 'view',
                css: {
                  width: '40rpx',
                  height: '174rpx',
                  display: 'flex',
                  alignItems: 'center',
                  'flex-shrink': 0,
                  justifyContent: 'center',
                  'box-sizing': 'border-box',
                  // backgroundColor: '#D8D8D8',
                  color: '#333333',
                },
                views: [
                  {
                    type: 'text',
                    text: '保\n修\n须\n知',
                    css: {
                      fontSize: '16rpx',
                      fontWeight: 'bold',
                      'line-height': '20rpx'
                    }
                  },
                ]
              },
              {
                type: 'view',
                css: {
                  width: '474rpx',
                  display: 'flex',
                  'flex-shrink': 0,
                  color: '#333333',
                  border: '0 solid #333333',
                  borderLeftWidth: '1rpx',
                  borderRightWidth: '1rpx',
                  boxSizing: "border-box",
                  'min-height': '174rpx'
                },
                views: [
                  {
                    type: 'view',
                    css: {
                      width: '474rpx',
                      display: 'flex',
                      'flex-shrink': 0,
                      color: '#333333',
                      boxSizing: "border-box",
                      padding: '12rpx 8rpx',
                    },
                    views: [
                      {
                        type: 'text',
                        text: info.extend.indicateInfo || ' ',
                        css: {
                          'line-height': '18rpx'
                        }
                      }
                    ]
                  },
                ]
              },
              {
                type: 'view',
                css: {
                  width: '158rpx',
                  height: '174rpx',
                  'flex-shrink': 0,
                  'box-sizing': 'border-box',
                  color: '#333333',
                  display: 'flex',
                  'flex-wrap': 'wrap',
                  'align-content': 'flex-start',
                  justifyContent: 'center',
                  padding: '8rpx 0'
                },
                views: [
                  {
                    type: 'view',
                    css: {
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: '154rpx',
                      padding: '12rpx 0'
                    },
                    views: [
                      {
                        type: 'text',
                        text: '顾 客 栏',
                        css: {
                          fontWeight: 'bold',
                          fontSize: '14rpx',
                        }
                      }
                    ]
                  }, {
                    type: 'view',
                    css: {
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: '154rpx',
                    },
                    views: [
                      {
                        type: 'text',
                        text: '此单条款经认同',
                      }
                    ]
                  }, {
                    type: 'view',
                    css: {
                      display: 'flex',
                      alignItems: 'center',
                      justifyContent: 'center',
                      width: '154rpx',
                      padding: '16rpx 0'
                    },
                    views: [
                      {
                        type: 'text',
                        text: info.extend.customerSignSwitch ?'客户签名：':'',
                      }
                    ]
                  }, info.extend.customerSignSwitch ?
                    {
                      type: 'view',
                      css: {
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        width: '154rpx',
                      },
                      views: [
						  info.extend.customerSign ?
                        {
                          type: 'image',
                          src: info.extend.customerSign += '?imageView2/2/h/40',
                          css: {
                            height: '24rpx',
                          }
                        }:{}
                      ]
                    }
                    : {
                    }
                ]
              },
            ]
          }
        ]
      },
      // bottom 行
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'center',
          height: '34rpx',
          marginTop: '4rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '应收金额：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: '￥' + formatCount(info.receivableAmount),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '实收金额：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: '￥' + formatCount(info.actualAmount),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }, {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'center',
            },
            views: [
              {
                type: 'text',
                text: '欠款金额：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: '￥' + formatCount(Math.max(Number(info.receivableAmount) - Number(info.actualAmount), 0)),
                css: {
                  fontWeight: 'bold'
                }
              }
            ]
          }
        ]
      },
      {
        type: 'view',
        css: {
          width: '100%',
          display: 'flex',
          alignItems: 'flex-start',
          height: '34rpx',
          marginTop: '4rpx'
        },
        views: [
          {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '开票人：',
                css: {
                  'flex-shrink': 0,
                }
              },
              info.extend.sealUrl && info.extend.sealType == '4' ?
                {
                  type: 'image',
                  src: info.extend.sealUrl,
                  css: {
                    'flex-shrink': 0,
                    height: '28rpx',
                  }
                } : {}
            ]
          }, {
            type: 'view',
            css: {
              width: '224rpx',
              display: 'flex',
              alignItems: 'flex-start',
            },
            views: [
              {
                type: 'text',
                text: '收款人：',
                css: {
                  'flex-shrink': 0,
                }
              },
              {
                type: 'text',
                text: info.lister,
                css: {
                  fontWeight: 'bold',
                }
              }
            ]
          },
        ]
      },
    ]
  }
}
export default electricalViews